<template>
    <div class="content">
        <el-steps :active="active" align-center :simple="false" class="steps">
            <template v-for="(item, index) in stepsList">
                <el-step :key="index" :title="item" @click="active = index"></el-step>
            </template>
        </el-steps>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <template v-if="active === 0">
                <div class="stepCenter">
                    <h3 class="title">案件信息：</h3>
                    <div class="step">
                        <el-form-item label="案件编号">
                            <el-input v-model="form.caseNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="案件来源">
                            <el-select v-model="form.caseSource" placeholder="请选择" style="width: 100%">
                                <el-option
                                    v-for="item in sourceOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="案件类型">
                            <el-input v-model="form.caseType"></el-input>
                        </el-form-item>
                        <el-form-item label="执法主体">
                            <el-input v-model="form.subject"></el-input>
                        </el-form-item>
                        <el-form-item label="执法人员">
                            <el-input v-model="form.lawMan"></el-input>
                        </el-form-item>
                        <el-form-item label="执法地点">
                            <el-input v-model="form.lawSite"></el-input>
                        </el-form-item>
                        <el-form-item label="案件类别">
                            <el-radio v-model="form.category" label="1">简易案件</el-radio>
                            <el-radio v-model="form.category" label="2">一般案件</el-radio>
                        </el-form-item>
                        <el-form-item label="是否立案">
                            <el-radio v-model="form.caseState" label="0">不予立案</el-radio>
                            <el-radio v-model="form.caseState" label="1">立案登记</el-radio>
                        </el-form-item>
                    </div>
                    <el-form-item label="案由" style="width: 100%" v-if="form.caseState === '1'">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.caseOrigin">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="案件描述" style="flex-basis: 100%" v-if="form.caseState === '1'">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.caseOrigin">
                        </el-input>
                    </el-form-item>

                    <h3 class="title">当事人信息：</h3>
                    <div class="step">
                        <el-form-item label="当事人类型">
                            <el-select v-model="form.partiesType" placeholder="请选择" style="width: 100%">
                                <el-option
                                    v-for="item in partiesTypeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="当事人">
                            <el-input v-model="form.parties"></el-input>
                        </el-form-item>
                        <el-form-item label="证件类型">
                            <el-select v-model="form.cardType" placeholder="请选择" style="width: 100%">
                                <el-option
                                    v-for="item in cardTypeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="证件号">
                            <el-input v-model="form.idNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="联系地址">
                            <el-input v-model="form.address"></el-input>
                        </el-form-item>
                    </div>
                    <h3 class="title">派发信息：</h3>
                    <div class="step">
                        <el-form-item label="是否派发">
                            <el-radio v-model="form.isDistribute" label="0">否</el-radio>
                            <el-radio v-model="form.isDistribute" label="1">是</el-radio>
                        </el-form-item>
                        <el-form-item label="派发人员" v-if="form.isDistribute === '1'">
                            <el-input v-model="form.distributeMan"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </template>
            <template v-if="active === 1">
                <div class="stepCenter">
                    <h3 class="title">调查取证信息：</h3>
                    <el-form-item label="违法事实" style="width: 100%">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.illegalFact">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="违法依据" style="flex-basis: 100%">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.illegalBasis">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="录入时间">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.addTime"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <h3 class="title">证据信息：<el-button type="primary" round size="mini" @click="openEvidentce">新增</el-button></h3>
                    <el-table :data="evidenceInfo" style="width: 100%" v-if="evidenceInfo.length > 0">
                        <el-table-column label="取证时间" width="180">
                            <template slot-scope="scope">
                                <i class="el-icon-time"></i>
                                <span style="margin-left: 10px">{{ scope.row.date | format }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="取证地点">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.address }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="附件">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.address }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="描述">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.describe }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="录入时间" width="180">
                            <template slot-scope="scope">
                                <i class="el-icon-time"></i>
                                <span style="margin-left: 10px">{{ scope.row.addTime | format }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-popconfirm
                                    title="这是一段内容确定删除吗？"
                                    @onConfirm="handleDelete(scope.$index, scope.row)"
                                >
                                    <el-button slot="reference" size="mini" type="danger">删除</el-button>
                                </el-popconfirm>

                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>

            <template v-if="active === 2">
                <div class="stepCenter">
                    <h3 class="title">音视频上传：</h3>
                    <div style="height: 30px"></div>
                        <el-upload
                            class="upload-demo"
                            drag
                            action="https://jsonplaceholder.typicode.com/posts/"
                            multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
                        </el-upload>
                </div>
                <div class="stepCenter">
                    <h3 class="title">文书材料上传：</h3>
                    <div style="height: 30px"></div>
                    <el-upload
                        class="upload-demo"
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/"
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
                    </el-upload>
                </div>
            </template>

            <template v-if="active === 3">
                <div class="stepCenter">
                    <h3 class="title">处罚告知信息：</h3>
                    <div style="height: 30px"></div>
                    <el-form-item label="违法事实" style="width: 100%">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.malfeasanceFact">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="违法依据" style="flex-basis: 100%">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.malfeasanceBasis">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="处罚依据" style="flex-basis: 100%">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.punishBasis">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="处罚内容" style="flex-basis: 100%">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.punishContent">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="处罚告知时间">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.punishInformTime"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </div>
            </template>

            <template v-if="active === 4">
                <div class="stepCenter">
                    <h3 class="title">处罚决定信息：</h3>
                    <div style="height: 30px"></div>
                    <div class="step">
                        <el-form-item label="决定类别">
                            <el-select v-model="form.decisionType" placeholder="请选择" style="width: 100%">
                                <el-option
                                    v-for="item in decisionTypeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="处罚决定种类">
                            <el-select v-model="form.punishType" placeholder="请选择" style="width: 100%">
                                <el-option
                                    v-for="item in punishTypeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item label="处罚内容" style="flex-basis: 100%">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.punishContent">
                        </el-input>
                    </el-form-item>
                    <div class="step">
                        <div>
                            <el-form-item label="决定日期">
                                <el-date-picker
                                    style="width: 100%"
                                    v-model="form.decisionDate"
                                    type="date"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="决定文书号">
                                <el-input v-model="form.docNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="决定书">
                                <el-input v-model="form.decidedBook"></el-input>
                            </el-form-item>

                            <el-form-item label="送达方式">
                                <el-select v-model="form.serviceWay" placeholder="请选择" style="width: 100%">
                                    <el-option
                                        v-for="item in serviceWayOption"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="送达日期">
                                <el-date-picker
                                    style="width: 100%"
                                    v-model="form.serviceDate"
                                    type="date"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="送达回证">
                                <el-input v-model="form.serviceProof"></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="决定书文件">
                                <el-upload
                                    class="upload-demo"
                                    drag
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    multiple>
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
                                </el-upload>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </template>

            <div class="btns">
                <el-button round @click="active -= 1" v-if="active > 0">上一步</el-button>
                <el-button type="primary" round @click="staging">暂 存</el-button>
                <el-button type="success" round @click="submit">保 存</el-button>
                <el-button round @click="active += 1" v-if="active < stepsList.length - 1">下一步</el-button>
            </div>
        </el-form>
        <el-dialog title="添加证据" :visible.sync="evidenceInfoShow" width="800px">
            <el-form :model="evidenceForm">
                <div class="evidenceForm">
                    <div class="efLeft">
                        <el-form-item label="取证时间">
                            <el-date-picker
                                style="width: 100%"
                                v-model="evidenceForm.date"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="取证地点">
                            <el-input v-model="evidenceForm.address" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="描述">
                            <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入内容"
                                v-model="evidenceForm.describe">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="efRight">
                        <el-form-item label="证据文件">
                            <el-upload
                                class="upload-demo"
                                drag
                                action="https://jsonplaceholder.typicode.com/posts/"
                                multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--                                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="evidenceInfoShow = false">取 消</el-button>
                <el-button size="small" type="primary" @click="add" v-if="!isEdit">确 定</el-button>
                <el-button size="small" type="primary" @click="edit" v-else>保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    name: 'Add',
    data () {
        return {
            active: 0,
            stepsList: ['基本信息', '调查取证', '音视频文书材料', '处罚告知', '处罚决定'],
            form: {
                caseNumber: '', // 案件编号
                caseSource: '', // 案件来源
                caseType: '', // 案件类型
                subject: '', //  执法主体
                lawMan: '', // 执法人员
                lawSite: '', // 执法地点
                category: '', // 案件类别
                caseState: '', // 是否立案
                caseOrigin: '', // 案由
                caseDescription: '', // 案件描述
                partiesType: '', // 当事人类型
                parties: '', // 当事人姓名
                cardType: '', // 证件类型
                idNumber: '', // 证件号码
                phone: '', // 当事人联系方式
                address: '', // 当事人联系地址
                isDistribute: '', // 是否派送
                distributeMan: '', // 派送人员
                illegalFact: '', // 违法事实
                illegalBasis: '', // 违法依据
                addTime: '', // 录入时间

                malfeasanceFact: '', // 违法事实2
                malfeasanceBasis: '', // 违法依据2
                punishBasis: '', // 处罚依据
                punishContent: '', // 处罚内容
                punishInformTime: '', // 处罚告知时间
                decisionType: '', // 决定类别
                punishType: '', // 处罚决定种类
                decisionDate: '', // 决定日期
                docNumber: '', // 决定文书号
                decidedBook: '', // 决定书
                serviceWay: '', // 送达方式
                serviceDate: '', // 送达日期
                serviceProof: ''// 送达回证
            },
            evidenceForm: {
                date: '',
                address: '',
                describe: ''
            },
            sourceOption: [
                { label: '群众举报', value: '群众举报' },
                { label: '上级交办', value: '上级交办' },
                { label: '部门移交', value: '部门移交' },
                { label: '巡查上报', value: '巡查上报' },
                { label: '其他', value: '其他' }
            ],
            partiesTypeOption: [
                { label: '法人', value: '法人' },
                { label: '自然人', value: '自然人' },
                { label: '非法人组织', value: '非法人组织' },
                { label: '个人工商户', value: '个人工商户' }
            ],
            cardTypeOption: [
                { label: '身份证号', value: '身份证号' },
                { label: '统一社会信用代码', value: '统一社会信用代码' }
            ],
            decisionTypeOption: [
                { label: '不予处罚', value: '不予处罚' },
                { label: '行政处罚', value: '行政处罚' },
                { label: '行政许可', value: '行政许可' },
                { label: '行政强制', value: '行政强制' },
                { label: '行政征收征用', value: '行政征收征用' },
                { label: '行政检查', value: '行政检查' },
                { label: '其他', value: '其他' }
            ],
            punishTypeOption: [
                { label: '警告', value: '警告' },
                { label: '罚款', value: '罚款' },
                { label: '没收违法所得', value: '没收违法所得' },
                { label: '没收非法财物', value: '没收非法财物' },
                { label: '责令停产停业', value: '责令停产停业' },
                { label: '暂扣或者吊销许可证', value: '暂扣或者吊销许可证' },
                { label: '行政拘留', value: '行政拘留' },
                { label: '其他', value: '其他' }
            ],
            serviceWayOption: [
                { label: '直接送达', value: '直接送达' },
                { label: '留置送达', value: '留置送达' },
                { label: '委托送达', value: '委托送达' },
                { label: '邮递送达', value: '邮递送达' },
                { label: '公告送达', value: '公告送达' },
                { label: '送达回证', value: '送达回证' }
            ],
            rules: {
                name: [{ required: true }]
            },
            evidenceInfoShow: false,
            evidenceInfo: [],
            isEdit: false,
            editIndex: ''
        }
    },
    filters: {
        format: function (date) {
            return moment(date).format('yyyy-MM-DD')
        }
    },
    mounted () {
        const form = localStorage.getItem('form')
        if (form) {
            this.form = JSON.parse(form)
            if (this.form.evidenceInfo) {
                this.evidenceInfo = this.form.evidenceInfo
            }
        }
    },
    methods: {
        openEvidentce: function () {
            this.evidenceInfoShow = true
        },
        add: function () {
            this.evidenceInfoShow = false
            this.evidenceForm.addTime = new Date()
            this.evidenceInfo.push(this.evidenceForm)
            localStorage.setItem('evidenceInfo', JSON.stringify(this.evidenceInfo))
            this.evidenceForm = {
                date: '',
                address: '',
                describe: ''
            }
        },
        edit: function () {
            const _this = this
            this.$set(this.evidenceInfo, this.editIndex, {
                date: _this.evidenceForm.date,
                address: _this.evidenceForm.address,
                describe: _this.evidenceForm.describe,
                addTime: _this.evidenceForm.addTime
            })
            this.isEdit = false
            this.evidenceInfoShow = false
        },
        submit: function () {
            this.$confirm('确定要提交吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                localStorage.removeItem('form')
                this.$message({
                    type: 'success',
                    message: '提交成功！!'
                })
                this.$router.push('/lawList')
            })
        },
        staging: function () {
            this.form.evidenceInfo = this.evidenceInfo
            localStorage.setItem('form', JSON.stringify(this.form))
            this.$message({
                type: 'success',
                message: '暂存成功！!'
            })
        },
        handleEdit (index, row) {
            this.isEdit = true
            this.editIndex = index
            this.evidenceInfoShow = true
            this.evidenceForm = {
                date: row.date,
                address: row.address,
                describe: row.describe,
                addTime: row.addTime
            }
        },
        handleDelete (index, row) {
            this.evidenceInfo.splice(index, 1)
        }
    }
}
</script>

<style scoped lang="less">
.content {
    margin: 15px 15px 80px 15px; background: #FFFFFF; border-radius: 5px; box-shadow: 0 10px 20px rgba(0,0,0,0.06); padding: 20px 30px;
}
h3.title {
    font-size: 16px; font-weight: bold; line-height: 50px; padding-left: 30px; border-bottom: 1px rgba(0,0,0,0.1) solid; margin-bottom: 20px;
}
.steps {
    width: 60%; min-width: 600px; margin: 20px auto;
}
.step {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-column-gap: 20px;
}
.stepCenter {
    width: 60%; min-width: 600px; margin: 20px auto;
}
.btns {
    position: fixed; bottom: 0;  right: 0; height: 60px; display: flex; align-items: center; background: #FFFFFF; width: calc(100% - 250px); justify-content: center; box-shadow: 0 -10px 20px rgba(0,0,0,0.06);
}
/deep/.el-upload {
    display: block !important;
}
/deep/.el-upload-dragger {
    width: 100% !important;
}
.evidenceForm {
    display: flex; justify-content: space-between;
    div {
        flex: 1;
    }
    .efRight {
        margin-left: 30px;
    }
}
</style>
